@import '~styles/settings.scss';

.c-login-form {
  text-align: left;

  h1 {
    font-weight: 300;
    font-size: rem(36px);
    margin-top: 0;
  }

  h3 {
    font-size: rem(18px);
    margin-bottom: rem(10px);

    @media screen and (min-width: $screen-m) {
      margin-bottom: rem(50px);
    }
  }

  p {
    font-size: rem(16px);
    margin-bottom: rem(40px);
    line-height: 1.5;
    margin-top: rem(22px);
  }

  .forgotten-password {
    margin-bottom: rem(10px);
    text-decoration: underline;
    font-weight: 500;
    font-size: rem(16px);
    width: fit-content;
  }

  .change-form,
  .forgotten-password {
    cursor: pointer;

    &:focus {
      outline: none;
    }
  }

  .reset-form-btn {
    margin: auto;
    width: rem(150px);
  }

  .submit-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row-reverse;
    margin-top: rem(20px);

    .change-form {
      margin-right: rem(15px);
      font-size: rem(16px);
      text-align: right;
      line-height: 20px;

      @media screen and (min-width: $screen-m) {
        display: inline-block;
      }

      b {
        text-decoration: underline;
        font-weight: 500;
        display: block;

        @media screen and (min-width: $screen-s) {
          display: inline-block;
        }
      }
    }
  }

  .submit-btn {
    min-width: rem(120px);
  }

  .submit-error {
    font-size: rem(14px);
    color: $error;
  }

  .social-btns {
    margin-top: rem(22px);
    margin-bottom: rem(40px);
  }

  .social-btn {
    width: 100%;

    &.-twitter {
      background-color: $twitter;
      margin-bottom: rem(20px);

      &:hover {
        background-color: darken($twitter, 10%);
      }
    }

    &.-facebook {
      background-color: $facebook;
      margin-bottom: rem(20px);

      &:hover {
        background-color: darken($facebook, 10%);
      }
    }

    &.-google {
      background-color: $googleplus;

      &:hover {
        background-color: darken($googleplus, 10%);
      }
    }
  }

  &.simple {
    h1 {
      font-size: rem(26px);
    }
  }
}
